<!DOCTYPE HTML>
<html>
<!--_meta 作为公共模版分离出去-->
{include file="common/_meta"}
<!--/meta 作为公共模版分离出去-->

<body>
<!--_header 作为公共模版分离出去-->
{include file="common/_header"}
<!--/_header 作为公共模版分离出去-->
<!--_menu 作为公共模版分离出去-->
{include file="common/_menu"}
<!--/_menu 作为公共模版分离出去-->

<section class="Hui-article-box">
        <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i>
            <a href="{:url('index/index')}"> 首页</a> <span class="c-gray en">&gt;</span> 
            <a href="{:url('category/index')}">栏目管理 </a><span class="c-gray en">&gt;</span> 
            <a href="{:url('index')}">栏目列表 </a> <span class="c-gray en">&gt;</span>
            添加栏目
            <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a> </nav>
<div class="Hui-article">
<article class="cl pd-20">
        <form action="" method="post" class="form form-horizontal" id="form-category-add">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>原上级栏目为：</label>
                <div class="formControls col-xs-8 col-sm-3">
                    <input type="text" class="input-text" value="{notempty name="pidname"}{$pidname}{else}顶级目录(无上级) {/notempty} " id="" disabled>
                </div>
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>是否切换：</label>
                <div class="formControls col-xs-8 col-sm-2 skin-minimal">
                    <div class="radio-box">
                        <input name="ischange" type="radio" id="is-1" value="0" checked>
                        <label for="sex-1">不切换</label>
                    </div>
                    <div class="radio-box">
                        <input name="ischange" type="radio" id="is-2" value="1">
                        <label for="sex-2">切换</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>上级栏目：</label>
                <div class="formControls col-xs-8 col-sm-3"> <span class="select-box">
                    <select class="select" id="sel_Sub" name="pid">
                        <option value="0">--请选择分类--</option>(不选则为顶级分类)
                        {foreach $top as $val}
                        <option value="{$val.id}">{$val.category_name}</option>
                            {notempty name="val.child"}
                            {foreach  $val.child  as $v}
                            <option value="{$v.id}">&nbsp;&nbsp;├ {$v.category_name}</option>
                            {/foreach}
                            {/notempty}
                        {/foreach}
                    </select>
                    </span> </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>栏目名称：</label>
                <div class="formControls col-xs-8 col-sm-3">
                    <input type="text" class="input-text" value="{$data.category_name}"  id="cate_name" name="cate_name">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">栏目图标：</label>
                <div class="formControls col-xs-8 col-sm-3">
                    <input type="text" class="input-text" value="{$data.category_icon}" id="cate_icon" name="cate_icon">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>栏目模板：</label>
                <div class="formControls col-xs-8 col-sm-3"> <span class="select-box">
                    <select class="select" id="sel_Sub" name="template" >
                        <option value="0">--请选择模板--</option>(不选则为默认模板)
                        <!-- 
                       -->
                    </select>
                    </span> </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">排序</label>
                <div class="formControls col-xs-8 col-sm-1">
                    <input type="text" class="input-text" value="{$data.sort}"  name="sort"  style="width:60px;">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>是否启用：</label>
                <div class="formControls col-xs-8 col-sm-2 skin-minimal">
                    {if condition="$data.isshow eq '1'"}
                    <div class="radio-box">
                        <input name="isshow" type="radio" id="sex-1" value="1" checked>
                        <label for="sex-1">启用</label>
                    </div>
                    <div class="radio-box">
                        <input name="isshow" type="radio" id="sex-2" value="0">
                        <label for="sex-2">不启用</label>
                    </div>
                    {else /} 
                    <div class="radio-box">
                            <input name="isshow" type="radio" id="sex-1" value="1" >
                            <label for="sex-1">启用</label>
                        </div>
                        <div class="radio-box">
                            <input name="isshow" type="radio" id="sex-2" value="0" checked>
                            <label for="sex-2">不启用</label>
                        </div>
                    {/if}
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">描述：</label>
                <div class="formControls col-xs-8 col-sm-5">
                    <textarea name="note" cols="" rows="" class="textarea"  placeholder="说点什么...最多输入100个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="textarealength(this,200)">{$data.desc}</textarea>
                    <p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
                </div>
                <div class="col-3"> </div>
            </div>
             <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div> 
        </form>
    </article>
</div>
</section>

<!--_footer 作为公共模版分离出去-->
{include file="common/_footer" /}
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本--> 
<script type="text/javascript">
$(function(){
    $("#form-category-add").submit(function(){
        var note = $("#note").val();
    
        if(!$("#cate_name").val()){
            layer.msg('栏目名不能为空!',{icon:5,time:1000});
            return false;
        }
        
        if(getblen(note)>200){
            layer.msg('备注过长',{icon:5,time:1000});
            return false;
        }
    })  
})

function textarealength(obj,toplength){
    var note =$(obj).val();
    var blen = getblen(note);

    if(blen<=toplength){
        $(".textarea-length").html(blen);
    }else{
        $(".textarea-length").css('color','red');
        $(".textarea-length").html(blen);
    }
}
//获取textarea字符长度，中文单字2字符，英文1字符
function getblen(str){
    var l = str.length;
    var blen = 0;

    for(i=0; i<l; i++) {
        if ((str.charCodeAt(i) & 0xff00) != 0) {
            blen ++;
        }
            blen ++;
    }

    return blen;
}
</script>
<!--请在上方写此页面业务相关的脚本--> 

</body>
</html>